<template>
  <Row>
    <div class="bg-light lter b-b wrapper-md clearfix titleBtns w-p" style="color: black">
      <h4 class="m-n font-thin pull-left">系统设置 > 系统参数管理 </h4>
    </div>
    <div class="wrapper-md" >
      <div class="panel panel-default form-horizontal form" role="form" >
        <div class="bg-light lter b-b wrapper-md clearfix titleBtns w-p" style="margin-bottom:10px;margin-top: 10px;color: black">
          <h4 class="m-n font-thin pull-left">查询条件 </h4>
        </div>
        <Row type="flex" justify="space-between" class="control" style="color: gainsboro">
          <div class="search-bar">
            <label style="color: black">名称(中文) :</label>
            <Input placeholder=" 请输入中文名称" v-model="nameZh" style="width: 200px; margin-right:100px" ></Input>
            <label style="color: black">资源类型 :</label>
            <Select v-model="model1" style="width:200px">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <Button  @click="search" style="color: black" type="primary"><Icon type="ios-search"><i class="fa fa-search"></i></Icon>查询</Button>
          </div>
        </Row>
        <div class="bg-light lter b-b wrapper-md clearfix titleBtns w-p" style="color: black">
          <h4 class="m-n font-thin pull-left">角色列表 </h4>
        </div>
        <Row type="flex" justify="space-between" class="control" style="color: gainsboro;margin-top: 10px;margin-bottom: 10px">
          <div class="table-style">
            <Button @click="Add = true" style="margin: 5px;background-color: cornflowerblue" ><Icon type="plus-round"><i class="fa fa-plus"></i></Icon> 新增</Button>
            <Button @click="Edit = true" style="margin: 5px;background-color: cornflowerblue"><Icon type="edit"><i class="fa fa-plus"></i></Icon> 编辑</Button>
            <Button @click="Del = true" style="margin: 5px;background-color: cornflowerblue"><Icon type="close"><i class="fa fa-plus"></i></Icon> 删除</Button>
          </div>
        </Row>
        <!-- 2.2 显示内容表格 -->
        <Table stripe :data="tableData"
               :columns="tableColumns"
               @on-select="onSelect"
               @on-select-all="onSelectAll"
               @on-selection-change="onSelectionChange">
        </Table>
        <!-- 2.3 分页导航navigation -->
        <Row type="flex" justify="space-between" class="footer">
          <div></div>
          <div style="margin: 10px;overflow: hidden">
            <Page :total="total" @on-page-size-change="pageSizeChange" @on-change="changePage" :current="pageNumber" :pageSize="pageSize" size="small" placement="top" show-elevator show-sizer ></Page>
          </div>
        </Row>
      </div>
    </div>
  </Row>
</template>
<script>
  export default {
    data () {
      return {
        cityList: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {
            value: 'chongqing',
            label: '重庆市'
          }
        ],
        model1: '',
        tableColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '参数类型',
            key: 'typeName'
          },
          {
            title: '名称(中文)',
            key: 'nameZh'
          },
          {
            title: '名称(英文)',
            key: 'nameEn'
          },
          {
            title: '值',
            key: 'value'
          },
          {
            title: '描述',
            key: 'description'
          },
          {
            title: '可编辑',
            key: 'editable'
          }

        ]
      }
    }
  }
</script>
